<template>
    <div class="secondClassify-warp">
        <div class="group">
            <div class="cell-box" v-for="(item,index) in kindList">
                <div class="news-box flex" @click="handleTap(item)">
                    <img :src="item.img" alt="" class="left">
                    <div class="center">
                        <div class="name-box">{{item.name}}</div>
                        <div class="section-line">
                            {{item.description}}
                        </div>
                        <!-- <div class="section-line supplement">
                            <span>{{item.date}}</span>
                        </div> -->
                    </div>
                    <img class="right" :src="require('../assets/images/17.png')">
                    <!-- <div class="right">
                        <div class="redTip">{{item.date}}</div>
                    </div> -->
                </div>
            </div>
        </div>
        <!-- <div class="bom-tip">请不要相信任何人发送的二维码链接,请勿私下交易谨防被骗</div> -->
    </div>
</template>

<script>
    import axios from '@/api/request'
    import {Cell,Group,CellBox,Card,Tab,TabItem} from "vux";

    export default {
        data() {
            return {
                kindList: [
                    // {
                    //     id: 1, name: '手机',
                    //     content: '苹果 三星 华为',
                    //     date:'40粉丝',
                    //     avrtar: require('../assets/images/type-6.png'),
                    //     img: require('../assets/images/17.png')
                    // },
                ]
            }
        },
        components: {
            TabItem,
            Cell,
            Group,
            CellBox,
            Tab,
        },
        created(){
            // this.fetchKindList()
        },
        mounted() {
            this.fetchKindList()
        },
        methods: {
            getBarWidth: function(index) {
                index = index || 0;
                let text = this.tabItem[index].name;
                // debugger
                return text.length * 16 / 37.5  + "rem";
            },
            fetchKindList() {
                axios('/device/kindSecond/firstCatalog','post',{}).then(res=>{
                    if(res.data.code==1000){
                        console.log(res)
                        this.kindList = res.data.data;
                    }
                })  
            },
            handleTap(item){
                this.$router.push({path:'/category',query:{kindId:item.id}})
            },
        }
    }
</script>

<style lang="less" scoped>
    .secondClassify-warp{
        height: 100%;
        box-sizing: border-box;
        // padding-top: 20rem/75;
        // background: rgb(242,243,247);
    }
    .cell-box:nth-child(1){
        background: #eee;
    }
    .news-box {
        width: 100%;
        background: #fff;
        height: 180rem/75;
        align-items: center;
        border-bottom: 1rem/37.5 solid #ddd;
        .left {
            width: 52rem/75;
            height: 42rem/75;
            margin-left: 65rem/75;
            // margin-top: 40rem/75;
        }
        .center {
            width: 540rem/75;
            // margin-top: 56rem/75;
            margin-left: 44rem/75;
            // margin-right: 20rem/75;
            .name-box {
                font-size: 14rem/37.5;
                color: #000;
                font-weight: 600;
            }
            .section-line {
                font-size: 13rem/37.5;
                color: #888;
                margin-top: 6rem/75;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
            }
            .supplement{
                // display: flex;
                color: #888;
                font-size: 12rem/75;
                justify-content: space-between;
                margin-top: 6rem/75;
                // padding-bottom: 6rem/37.5;
            }
        }
        .right{
            width: 14rem/75;
            height: 22rem/75;
            // .redTip{
            //     font-size: 26rem/75;
            //     text-align: center;
            //     color: #444;
            // }
        }
    }
    // .cell-box:last-child .news-box{
    //     border-bottom: none;
    // }
    // .bom-tip{
    //     padding-top: 44rem/75;
    //     text-align: center;
    //     color: #999;
    //     font-size: 20rem/75;
    // }
</style>
